<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加区域"
    top="10vh"
    width="1400"
    draggable
  >
    <el-cascader
      v-model="value"
      :options="options"
      placeholder="请选择区域"
      :props="{ expandTrigger: 'hover' }"
    />
    <br />
    <el-input
      style="margin: 20px 0; width: 212px"
      v-model="input"
      placeholder="请输入房间名称"
    />
    <myCanvas />
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import myCanvas from '@/components/canvas.vue'

const dialogVisible = ref(false)
const value = ref('')
const input = ref('')
const options = [
  {
    value: '1',
    label: 'A栋',
    children: [
      {
        value: '2',
        label: '一层',
      },
      {
        value: '3',
        label: '二层',
      },
    ],
  },
  {
    value: '2',
    label: 'B栋',
    children: [
      {
        value: '2',
        label: '一层',
      },
      {
        value: '3',
        label: '二层',
      },
    ],
  },
]

defineExpose({ dialogVisible })
</script>

<style scoped lang="scss"></style>
